<template>
  <div class="person">
    <h2>温度超过50发送请求:{{ temp }}</h2>
    <h2>水位超过80发送请求:{{ height }}</h2>
    <button @click="changeTemp">点我+1</button>
    <button @click="changeHeight">点我+1</button>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, watchEffect } from "vue";
let temp = ref(10)
let height = ref(0)

function changeTemp() {
  temp.value += 10
}
function changeHeight() {
  height.value += 10
}

/* watch([temp, height], (value) => {
  let [newTemp, newHeight] = value;
  if (newTemp >= 60 || newHeight >= 80) {
    console.log('调用后端接口')
  }
}) */

// 监视 -- watchEffect实现
watchEffect(() => {
  if (height.value > 50 || temp.value > 60) {
    console.log('调用后端接口')
  }
})
</script>

<style scoped>
.person {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

li {
  font-size: 20px;
}

button {
  margin: 0 10px auto;
}
</style>
